<template lang="html">
    <div class="">
        <button type="button" @click="isShow=!isShow" class="btn btn-success" name="button">显示/隐藏</button>
        <transition name="right-in">
            <div class="box" v-if="isShow">

            </div>
        </transition>
    </div>
</template>

<script>
export default {
	data() {
		return {
			isShow: true
		}
	}
}
</script>

<style lang="css">
.box{
    width:300px;
    height:300px;
    background-color: red;
}
.right-in-enter-active,.right-in-leave-active{
    transition:0.5s;
}
.right-in-enter{
    transform: translateX(300px);
    opacity: 0;
}
.right-in-leave-active{
    opacity: 0;
    transform: translateY(300px);
}


</style>
